<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/wo.css">
    <link rel="stylesheet" href="css/lbt.css">
    <link rel="stylesheet" href="font_3397347_02cns3ux7ouz/iconfont.css">
</head>

<body style="background-color:rgba(241, 243, 245, 1) ;">
    <div class="container-fluid" style="width: 100%;background-color: white;">
        <div class="row">
            <div class="col-lg-12 text-center">
                <img src="img/guanggao.png" alt="" style="width: 1200px; height: 90px;">
                <button class="btn btn-default">X</button>
            </div>
        </div>
    </div>
    <div class="container-fluid" style="height: 36px;width: 100%; background-color:black">
        <div class="row" style="height: 36px; width: 1200px; margin: 0 auto; color:whitesmoke; text-align: center; line-height: 36px;font-size: 12px;position: relative;">
            <div class="col-md-12 text-center" style="padding-right: 0px; padding-left: 0px; list-style: none; height: 36px;">
                <div class="col-md-5 " style="padding:0; ">
                    <li style="float: left; ">首页</li>
                    <li style="float: left;margin-left: 12px; ">华为官网</li>
                    <li style="float: left;margin-left: 12px; ">花粉俱乐部</li>
                    <li style="float: left;margin-left: 12px; ">V码(优购码)</li>
                    <li style="float: left;margin-left: 12px; ">企业购</li>
                    <li style="float: left;margin-left: 12px; ">Select Region</li>
                    <li class="dropdown " style="float: left;margin-left: 12px;">更多精彩</li>
                </div>
                <div class="col-md-2 " style="height: 36px;"></div>
                <div class="col-md-5" style=" list-style: none; position: absolute; right: -35px;padding:0;">
                    <li style="float: left; margin-left: 35px; "> <a href="./html/login.html" style="color:white;">登录</a></li>
                    <li style="float: left;margin-left: 20px; "><a href="./html/register.html" style="color:white;">注册</a> </li>
                    <li style="float: left; margin-left: 20px; ">我的订单</li>
                    <li style="float: left; margin-left: 30px; ">客服 </li>
                    <li style="float: left; margin-left: 30px; ">网站导航</li>
                    <li style="float: left;margin-left: 30px; ">手机版</li>
                    <li style="float: left; margin-left:30px">
                        <a href="html/cart.html" style="color:white ;" <img src="img/gwc.png " alt=" " style="height: 16px;width: 16px; "> 购物车(0) </a>
                    </li>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid " style="height:75px;width: 100%; position: relative; background-color: white;">
        <div class=" row " style="height: 75px; width: 1200px;margin: 0 auto">

            <div class="col-md-12" style="height: 75px;width: 1200px; position: absolute;margin-top: 0px;padding: 0;">

                <div class="col-md-2 " style="margin-left:0; padding: 0;">
                    <img src="img/logo_app.png" alt=" " style="height: 75px;">
                </div>
                <div class="col-md-8 " style="font-size: 16px; line-height: 75px; position: relative; ">
                    <ul class="dhl" style="list-style: none; font-family: 'Helvetica Neue', Helvetica, Arial, 'Microsoft Yahei', 'Hiragino Sans GB', 'Heiti SC', 'WenQuanYi Micro Hei', sans-serif !important; ">
                        <li style="float: left; margin-right: 30px; "> 华为专区</li>
                        <li style="float: left;margin-right: 30px; ">鸿蒙智联</li>
                        <li style="float: left;margin-right: 30px; ">莫塞尔</li>
                        <li style="float: left;margin-right: 30px; ">华为智选</li>
                        <li style="float: left;margin-right: 30px; ">HarmonyOS</li>
                        <li style="float: left;margin-right: 30px; ">特惠企采</li>
                        <li style="float: left;margin-right: 30px; ">教育购</li>
                    </ul>
                </div>
                <div class="ssk">
                    <ul>
                        <li><img src="img/fdj.png" alt=""></li>
                        <li> <input type="text" value="搜索商品"></li>
                        <li id="X" style="position: absolute;top:0px;right: 0; line-height: 36px;text-align: center;opacity: 0.4;"> X</li>
                    </ul>
                </div>
                <div class="col-md-2" style="position:relative;height: 75px;padding: 0;">
                    <div id="ss" style="position: absolute;right: 0;top: 24.5px;"><img src="img/fdj.png " alt=" " style="width: 26px;height: 26px; "></div>
                </div>
            </div>
        </div>
    </div>
    <div class="gouge" style="position: relative;">
        <div class="cb">
            <div>
                <span>手机</span>
                <span>></span>
            </div>
            <div>
                <span>电脑</span>
                <span>></span>
            </div>
            <div>
                <span>平板</span>
                <span>></span>
            </div>
            <div>
                <span>智慧屏</span>
                <span>></span>
            </div>
            <div>
                <span>穿戴</span>
                <span>></span>
            </div>
            <div>
                <span>耳机音箱</span>
                <span>></span>
            </div>
            <div>
                <span>门锁路由</span>
                <span>></span>
            </div>
            <div>
                <span> 配件</span>
                <span>></span>
            </div>
            <div>
                <span>生态产品</span>
                <span>></span>
            </div>
            <div>
                <span> 家用电器</span>
                <span>></span>
            </div>
            <div>
                <span>美食酒饮</span>
                <span>></span>
            </div>
            <div>
                <span>增值服务/企业商用</span>
                <span>></span>
            </div>
        </div>
        <div class="swiper mySwiper" style=" width: 1520px;height: 550px;z-index: 0;margin: 0 auto;">
            <div class="swiper-wrapper">

                <div class="swiper-slide"><img src="img/1.png" alt="" style=" width: 1530px;height: 550px;"></div>
                <div class="swiper-slide"><img src="img/2.png" alt="" style=" width: 1530px;height: 550px;"></div>
                <div class="swiper-slide"><img src="img/3.png" alt="" style=" width: 1530px;height: 550px;"></div>
                <div class="swiper-slide"><img src="img/4.png" alt="" style=" width: 1530px;height: 550px;"></div>
                <div class="swiper-slide"><img src="img/5.png" alt="" style=" width: 1530px;height: 550px;"></div>
                <div class="swiper-slide"><img src="img/6.png" alt="" style=" width: 1530px;height: 550px;"></div>
                <div class="swiper-slide"><img src="img/7.png" alt="" style=" width: 1530px;height: 550px;"></div>
            </div>
            <div class="swiper-button-next" style="position:absolute; right:165px;"></div>
            <div class="swiper-button-prev" style="position:absolute; left: 360px;"></div>
            <div class="swiper-pagination"></div>
        </div>
    </div>

    <div class="miao">
        <span style="font-size:24px ;line-height: 65px;"> 秒杀</span>
        <span style="position: absolute; right: 0px; line-height: 65px;font-size: 16px;">限时秒杀></span>
    </div>
    <div class="miaosha">
        <div class="wrap">
            <div class="box1">倒计时</div>
            <div class="box2"></div>
            <h4>距离结束还有</h4>
            <div class="box3">
                <div class="th">01</div>
                <span class="point">:</span>
                <div class="tm">20</div>
                <span class="point">:</span>
                <div class="ts">40</div>
            </div>
        </div>
        <a href="./html/detail.html">
            <ul id="prodList">
                <li>
                    <div style="width:230px ;height: 180px; "><img src="img/商品1.png" alt=""></div>
                    <p style="background-color:red;width:56px;height:16px; margin: 0 auto;">超级秒杀</p>
                    <p>决色defense 手机保护壳 华为Mate40Pro Shield系列 防摔防伤 </p>
                    <p>秒杀降50元</p>
                    <p><span style="color:red ;">￥168</span> <span><del>￥218</del></span></p>
                </li>
                <li>
                    <div style="width:230px ;height: 180px; "><img src="img/商品2.png" alt=""></div>
                    <p style="background-color:red;width:56px;height:16px; margin: 0 auto;">超级秒杀</p>
                    <p>美的极光净水机MRO1787D-1000G</p>
                    <p>秒杀降799元</p>
                    <p><span style="color:red ;">￥3799</span> <span><del>￥4598</del></span></p>
                </li>
                <li>
                    <div style="width:230px ;height: 180px; "><img src="img/商品3.png" alt=""></div>
                    <p style="background-color:red;width:56px;height:16px; margin: 0 auto;">超级秒杀</p>
                    <p>OGAWA奥佳华家用按摩椅 OG7306</p>
                    <p>秒杀降4700元</p>
                    <p><span style="color:red ;">￥8299</span> <span><del>￥12000</del></span></p>
                </li>
                <li>
                    <div style="width:230px ;height: 180px; "><img src="img/商品4.png" alt=""></div>
                    <p style="background-color:red;width:56px;height:16px; margin: 0 auto;">超级秒杀</p>
                    <p>Helmetphone MT1 Neo智能骑行头盔 （山地/公路）（支持鸿蒙智联）</p>
                    <p>秒杀降120元</p>
                    <p><span style="color:red ;">￥779</span> <span><del>￥899</del></span></p>
                </li>
            </ul>
        </a>
    </div>
    <div class="xsg">
        <span style="font-size:24px ;line-height: 65px; float: left;"> 限时购</span>
        <span style="color: rgb(0, 0, 0); font-size: 18px;line-height: 65px; height: 25px;width: 54px; float:left;margin-left: 20px;">据结束</span>
        <div style="float: left; margin-top: 15px;">
            <div class="th" style="background-color: red;">01</div>
            <span class="point">:</span>
            <div class="tm" style="background-color:red ;">20</div>
            <span class="point">:</span>
            <div class="ts" style="background-color:red ;">40</div>
        </div>
        <span style="position: absolute;right: 0px; line-height: 65px;font-size: 16px;">限时购></span>
    </div>
    <div style="width: 1200px;height: 180px; position: relative; margin: 0 auto;">
        <ul id="prodList" style="position:absolute ;width: 1200px; left: 0px;">
            <li style="margin-left: 0px;">
                <div style="width:225px ;height: 180px; "><img src="img/商品1.png" alt=""></div>
                <p>华为畅享50</p>
                <p>学生认证优惠50</p>
                <p style="color:red;">￥168</p>
            </li>
            <li>
                <div style="width:225px ;height: 180px; "><img src="img/商品2.png" alt=""></div>
                <p>美的极光净水机MRO1787D-1000G</p>
                <p>下单立省700元</p>
                <p><span style="color:red ;">￥3799</span> <span><del>￥4598</del></span></p>
            </li>
            <li>
                <div style="width:225px ;height: 180px; "><img src="img/商品3.png" alt=""></div>
                <p>OGAWA奥佳华家用按摩椅 OG7306</p>
                <p>秒杀降4700元</p>
                <p><span style="color:red ;">￥8299</span> <span><del>￥12000</del></span></p>
            </li>
            <li>
                <div style="width:225px ;height: 180px; "><img src="img/商品4.png" alt=""></div>
                <p>Helmetphone MT1 Neo智能骑行头盔 （山地/公路）（支持鸿蒙智联）</p>
                <p>秒杀降120元</p>
                <p><span style="color:red ;">￥779</span> <span><del>￥899</del></span></p>
            </li>
            <li>
                <div style="width:225px ;height: 180px; "><img src="img/商品5.png" alt=""></div>
                <p>决色defense 手机保护壳 华为Mate40Pro Shield系列 防摔防伤 </p>
                <p>秒杀降50元</p>
                <p><span style="color:red ;">￥168</span> <span><del>￥218</del></span></p>
            </li>
        </ul>
    </div>
    <div class="bao" style="margin-bottom: 0px;">
        <span style="font-size:24px ;line-height: 65px;"> 爆款推荐</span>
    </div>
    <div style="width: 1200px;height:635px; position: relative; margin: 0 auto;">
        <ul id="prodList" style="position:absolute ;width: 1200px; left: 0px;">
            <li style="margin-left: 0px;width:468px ;height: 300px;">
                <div><img src="img/商品6.png" alt="" style="width:466px;height:288px;"></div>
            </li>
            <li>
                <div style="width:225px ;height: 180px; "><img src="img/商品2.png" alt=""></div>
                <p>美的极光净水机MRO1787D-1000G</p>
                <p>下单立省700元</p>
                <p><span style="color:red ;">￥3799</span> <span><del>￥4598</del></span></p>
            </li>
            <li>
                <div style="width:225px ;height: 180px; "><img src="img/商品3.png" alt=""></div>
                <p>OGAWA奥佳华家用按摩椅 OG7306</p>
                <p>秒杀降4700元</p>
                <p><span style="color:red ;">￥8299</span> <span><del>￥12000</del></span></p>
            </li>
            <li>
                <div style="width:225px ;height: 180px; "><img src="img/商品4.png" alt=""></div>
                <p>Helmetphone MT1 Neo智能骑行头盔 （山地/公路）（支持鸿蒙智联）</p>
                <p>秒杀降120元</p>
                <p><span style="color:red ;">￥779</span> <span><del>￥899</del></span></p>
            </li>
            <li style="margin-left:0px;margin-top: 10px;">
                <div style="width:225px ;height: 180px; "><img src="img/商品5.png" alt=""></div>
                <p>决色defense 手机保护壳 华为Mate40Pro Shield系列 防摔防伤 </p>
                <p>秒杀降50元</p>
                <p><span style="color:red ;">￥168</span> <span><del>￥218</del></span></p>
            </li>
            <li style="margin-top: 10px;">
                <div style="width:225px ;height: 180px; "><img src="img/商品1.png" alt=""></div>
                <p>决色defense 手机保护壳 华为Mate40Pro Shield系列 防摔防伤 </p>
                <p>秒杀降50元</p>
                <p><span style="color:red ;">￥168</span> <span><del>￥218</del></span></p>
            </li>
            <li style="margin-top: 10px;">
                <div style="width:225px ;height: 180px; "><img src="img/商品7.png" alt=""></div>
                <p>决色defense 手机保护壳 华为Mate40Pro Shield系列 防摔防伤 </p>
                <p>秒杀降50元</p>
                <p><span style="color:red ;">￥168</span> <span><del>￥218</del></span></p>
            </li>
            <li style="margin-top: 10px;">
                <div style="width:225px ;height: 180px; "><img src="img/商品8.png" alt=""></div>
                <p>决色defense 手机保护壳 华为Mate40Pro Shield系列 防摔防伤 </p>
                <p>秒杀降50元</p>
                <p><span style="color:red ;">￥168</span> <span><del>￥218</del></span></p>
            </li>
            <li style="margin-top: 10px;">
                <div style="width:225px ;height: 180px; "><img src="img/商品9.png" alt=""></div>
                <p>决色defense 手机保护壳 华为Mate40Pro Shield系列 防摔防伤 </p>
                <p>秒杀降50元</p>
                <p><span style="color:red ;">￥168</span> <span><del>￥218</del></span></p>
            </li>
        </ul>
    </div>
    <div class="swiper mySwiper" style="z-index: 0;">
        <div class="swiper-wrapper" style="width: 1200px;height: 120px;margin: 0 auto;">
            <div class="swiper-slide"><img src="img/轮播1.png" alt="" style="width: 1200px;height: 120px;"></div>
            <div class="swiper-slide"><img src="img/轮播2.png" alt="" style="width: 1200px;height: 120px;"></div>
            <div class="swiper-slide"><img src="img/轮播3.png" alt="" style="width: 1200px;height: 120px;"></div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <div>
        <div class="container-fluid" style="background-color:white;margin: 48px 0 0 0; position: relative;">
            <div class="row" style="width: 1200px;height: 84px;margin: 0 auto;border-bottom: 2px solid rgba(244, 244, 244, 1);">
                <div class="col-lg-12 text-center">
                    <div class="col-md-3 " style="height:84px;">
                        <img src="img/企业.png" alt="" style="width:24px;height:24px;margin-top: -5px;"><span style="margin-left: 16px; font-size: 16px; line-height: 84px;font-weight: 400;">百强企业 品质保证</span>
                    </div>
                    <div class="col-md-3 " style="height:84px ;">
                        <img src="img/退货.png" alt="" style="width:24px;height:24px;margin-top: -5px;"><span style="margin-left: 16px; font-size: 16px; line-height: 84px;font-weight: 400;">7天退货 15天换货</span>
                    </div>
                    <div class="col-md-3 " style="height:84px ;">
                        <img src="img/运费.png" alt="" style="width:24px;height:24px;margin-top: -5px;"><span style="margin-left: 16px; font-size: 16px; line-height: 84px;font-weight: 400;">48元起免运费</span>
                    </div>
                    <div class="col-md-3 " style="height:84px ;">
                        <img src="img/联保.png" alt="" style="width:24px;height:24px;margin-top: -5px;"><span style="margin-left: 16px; font-size: 16px; line-height: 84px;font-weight: 400;">2000家服务店 全国联保</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid" style="height: 311px; background-color: white;">
        <div class="row" style="height: 213px; width: 1200px; margin: 56px auto; border-bottom: 2px solid rgba(244, 244, 244, 1);">
            <div class="col-md-9">
                <div class="container-fluid">
                    <div class="row" style="width:952px; border-right:2px solid rgba(244, 244, 244, 1) ;">
                        <div class="col-md-2" style="height:213px;">
                            <ul style="list-style:none;">
                                <li style="font-size: 14px; margin-bottom: 32px;">购物指南</li>
                                <li style="font-size:12px; line-height: 17px; margin-bottom: 10px;">免息分期</li>
                                <li style="font-size:12px; line-height: 17px; margin-bottom: 10px;">依旧换新</li>
                                <li style="font-size:12px; line-height: 17px; margin-bottom: 10px;">众测活动</li>
                                <li style="font-size:12px; line-height: 17px; margin-bottom: 10px;">企业购</li>
                                <li style="font-size:12px; line-height: 17px; margin-bottom: 10px;">O2O采购</li>
                            </ul>
                        </div>
                        <div class="col-md-2">
                            <ul style="list-style:none;">
                                <li style="font-size: 14px; margin-bottom: 32px;">售后服务</li>
                                <li style="font-size:12px; line-height: 17px; margin-bottom: 10px;">门店维修</li>
                                <li style="font-size:12px; line-height: 17px; margin-bottom: 10px;">保修政策</li>
                                <li style="font-size:12px; line-height: 17px; margin-bottom: 10px;">防伪查询</li>
                                <li style="font-size:12px; line-height: 17px; margin-bottom: 10px;">退换货政策</li>
                                <li style="font-size:12px; line-height: 17px; margin-bottom: 10px;">手机寄修服务</li>
                                <li style="font-size:12px; line-height: 17px; margin-bottom: 10px;">维修备件价格查询</li>
                            </ul>
                        </div>
                        <div class="col-md-2">
                            <ul style="list-style:none;">
                                <li style="font-size: 14px; margin-bottom: 32px;">维修于技术支持</li>
                                <li style="font-size:12px; line-height: 17px; margin-bottom: 10px;">服务店</li>
                                <li style="font-size:12px; line-height: 17px; margin-bottom: 10px;">预约维修</li>
                                <li style="font-size:12px; line-height: 17px; margin-bottom: 10px;">手机寄修</li>
                                <li style="font-size:12px; line-height: 17px; margin-bottom: 10px;">备件价格查询</li>
                                <li style="font-size:12px; line-height: 17px; margin-bottom: 10px;">上门服务</li>
                            </ul>
                        </div>
                        <div class="col-md-2">
                            <ul style="list-style:none;">
                                <li style="font-size: 14px; margin-bottom: 32px;">特殊服务</li>
                                <li style="font-size:12px; line-height: 17px; margin-bottom: 10px;">防伪查询</li>
                                <li style="font-size:12px; line-height: 17px; margin-bottom: 10px;">补购保障</li>
                                <li style="font-size:12px; line-height: 17px; margin-bottom: 10px;">以旧换新</li>
                                <li style="font-size:12px; line-height: 17px; margin-bottom: 10px;">礼品包装</li>
                            </ul>
                        </div>
                        <div class="col-md-2">
                            <ul style="list-style:none;">
                                <li style="font-size: 14px; margin-bottom: 32px;">关于我们</li>
                                <li style="font-size:12px; line-height: 17px; margin-bottom: 10px;">公司接受</li>
                                <li style="font-size:12px; line-height: 17px; margin-bottom: 10px;">华为零售店</li>
                                <li style="font-size:12px; line-height: 17px; margin-bottom: 10px;">商家中心</li>
                                <li style="font-size:12px; line-height: 17px; margin-bottom: 10px;">意见反馈</li>
                            </ul>
                        </div>
                        <div class="col-md-2">
                            <ul style="list-style:none;">
                                <li style="font-size: 14px; margin-bottom: 32px;">友情链接</li>
                                <li style="font-size:12px; line-height: 17px; margin-bottom: 10px;">华为集团</li>
                                <li style="font-size:12px; line-height: 17px; margin-bottom: 10px;">华为CBG官网</li>
                                <li style="font-size:12px; line-height: 17px; margin-bottom: 10px;">花粉俱乐部</li>
                                <li style="font-size:12px; line-height: 17px; margin-bottom: 10px;">华为云</li>
                                <li style="font-size:12px; line-height: 17px; margin-bottom: 10px;">华为应用市场</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3" style="position: relative;">
                <div style="line-height:32px;font-size: 24px;color: black; right: 80px;position: absolute;">950825</div>
                <div style="font-size:13px;line-height:19px;position: absolute;right:20px ;top: 30px;">7 x 24 小时客服热线 (仅收市话费)</div>
                <button style="width:170px;height:34px;border-radius: 17px;background-color: black;position: absolute;right: 20px;top: 60px; color: white;font-size: 12px;"><img src="img/客服.png" alt="" style="height: 24px; width: 24px;"> 在线客服</button>
                <div style="position:absolute;right: -25px; top: 115px;">
                    <span>关注VMALL：</span>
                    <img src="img/微信.png" alt="" style="height: 24px;width: 24px;margin-left: 10px;">
                    <img src="img/头条样式.png" alt="" style="height: 22px;width: 22px; margin-left: 10px;">
                    <img src="img/新浪微博.png" alt="" style="height: 22px;width: 22px;margin-left: 10px;">
                    <img src="img/百度.png" alt="" style="height: 22px;width: 22px;margin-left: 10px;">
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid" style="height:152px;background-color: white;">
        <div class="row" style="height:152px;width: 1200px;margin: 0 auto;position: relative;">
            <div class="col-md-1">
                <img src="img/华为.png" alt="" style="height: 20;width: 80px;">
            </div>
            <div class="col-md-8">
                <ul style="height:17px;font-size: 12px;list-style: none;display: flex; color: rgba(0, 0, 0, 0.4);">
                    <li style="margin-right: 6px;">华为集团</li>
                    <li style="margin-right: 6px; margin-right: 6px;">华为CBG官网</li>
                    <li style="margin-right: 6px; margin-right: 6px;">花粉俱乐部</li>
                    <li style="margin-right: 6px; margin-right: 6px;">华为应用市场</li>
                    <li style="margin-right: 6px; margin-right: 6px;">HarmonyOS</li>
                    <li style="margin-right: 6px; margin-right: 6px;">华为终端云空间</li>
                    <li style="margin-right: 6px; margin-right: 6px;">开发者联盟</li>
                    <li style="margin-right: 6px; margin-right: 6px;">华为商城手机版</li>
                </ul>
            </div>
            <div class="col-md-3" style="height: 36.2px; width: 96px;position: absolute;right: 0;">
                <img src="img/营业执照.png" alt="">
            </div>
        </div>
    </div>
    <div class="cbl">
        <div><span class="iconfont icon-gouwuche"></span>
            <p>购物车</p>
        </div>

        <div><span class="iconfont icon-kefu"></span>
            <p>在线客服</p>
        </div>

        <div><span class="iconfont icon-fuwu_o"></span>
            <p>自助服务</p>
        </div>

        <div id="backTop"><span class="iconfont icon-huidaodingbu"></span>
            <p>回到顶部</p>
        </div>
    </div>
</body>
<script src="js/lbt.js"></script>
<script>
    // 下拉菜单
    // $('.h_inner').find('.s_down').mouseover(function() {
    //     $(this).css('background', '#fff').children('a').css('color', '#cb242b').children('i').removeClass('icon-shangxiajiantou').addClass('icon-shang').parent().siblings('.b').show();
    // })
    // $('.h_inner').find('.s_down').mouseout(function() {
    //         $(this).css({
    //             background: '#2e2828',
    //             height: 36
    //         }).children('a').css('color', '#afafaf').children('i').removeClass('icon-shang').addClass('icon-shangxiajiantou').parent().siblings('.b').hide();
    //     })
    //  回到顶部   吸顶
    var container = document.getElementsByClassName("container-fluid")[2];
    let oBackTop = document.getElementById("backTop");
    window.onscroll = function() {
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop >= 126) {
            oBackTop.style.display = "block";
            container.style.position = "fixed"
            container.style.top = "0"
            container.style.zIndex = "10"
        } else {
            oBackTop.style.display = "none";
            container.style.position = "static"
        }
    }
    let timer = null;
    oBackTop.onclick = function() {
            clearInterval(timer);

            timer = setInterval(function() {
                let iCur = document.documentElement.scrollTop || document.body.scrollTop;
                let iSpeed = -iCur / 4;
                iSpeed = Math.floor(iSpeed);

                document.documentElement.scrollTop = document.body.scrollTop = iCur + iSpeed;

                if (iCur == 0) {
                    clearInterval(timer);
                }

            }, 30);
        }
        // 通过class名完成回到顶部
        // let oBackTop = document.getElementsByClassName("backTop");
        // window.onscroll = function() {
        //     let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        //     if (scrollTop >= 300) {
        //         for (var i = 0; i < oBackTop.length; i++) {
        //             oBackTop[i].style.display = "block";
        //         };
        //     } else {
        //         for (var i = 0; i < oBackTop.length; i++) {
        //             oBackTop[i].style.display = "none";
        //         };
        //     }
        // }
        // let timer = null;
        // oBackTop.onclick = function() {
        //         clearInterval(timer);

    //         timer = setInterval(function() {
    //             let iCur = document.documentElement.scrollTop || document.body.scrollTop;
    //             let iSpeed = -iCur / 4;
    //             iSpeed = Math.floor(iSpeed);

    //             document.documentElement.scrollTop = document.body.scrollTop = iCur + iSpeed;

    //             if (iCur == 0) {
    //                 clearInterval(timer);
    //             }

    //         }, 30);
    //     }
    // 轮播图
    var oBtn = document.getElementsByClassName("btn-default")[0];
    oBtn.onclick = function() {
        let aDiv = document.getElementsByClassName("container-fluid")[0];
        aDiv.style.display = "none";
    }
    var swiper = new Swiper(".mySwiper", {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
    // 秒杀
    window.onload = function() {
        let hour = document.querySelectorAll(".th")[0];
        let minute = document.querySelectorAll(".tm")[0];
        let second = document.querySelectorAll(".ts")[0];

        let inputTime = +new Date("2022-7-15 00:00:00");
        countDown();
        setInterval(countDown, 1000);

        function countDown() {
            var nowTime = +new Date();
            var times = inputTime > nowTime ? (inputTime - nowTime) / 1000 : 0;
            var h = parseInt(times / 60 / 60);
            h = h < 10 ? "0" + h : h;
            hour.innerHTML = h;
            var m = parseInt((times / 60) % 60);
            m = m < 10 ? "0" + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60);
            s = s < 10 ? "0" + s : s;
            second.innerHTML = s;
        }
    };
    // 搜索框
    let ss = document.getElementById("ss");
    let Col = document.getElementsByClassName("col-md-2")[1];
    let col = document.getElementsByClassName("col-md-8")[0];
    let cl = document.getElementsByClassName("col-md-2")[2];
    let Ssk = document.getElementsByClassName("ssk");
    ss.onclick = function() {

        Col.style.display = "none";
        col.style.display = "none";
        cl.style.display = "none";
        for (var i = 0; i < Ssk.length; i++) {
            Ssk[i].style.display = "block";
        };
    }
    let X = document.getElementById("X");
    X.onclick = function() {
            Col.style.display = "block";
            col.style.display = "block";
            cl.style.display = "block";
            for (var i = 0; i < Ssk.length; i++) {
                Ssk[i].style.display = "none";
            };
        }
        // 购物车
        // let productData = {
        //         "10001": {
        //             id: 10001,
        //             title: "商品1",
        //             imgsrc: "img/商品1.png",
        //             price: 150
        //         },
        //         "10002": {
        //             id: 10002,
        //             title: "商品2",
        //             imgsrc: "img/商品2.png",
        //             price: 200
        //         },
        //         "10003": {
        //             id: 10003,
        //             title: "商品3",
        //             imgsrc: "img/商品3.png",
        //             price: 300

    //         },
    //         "10004": {
    //             id: 10004,
    //             title: "商品4",
    //             imgsrc: "img/商品4.png",
    //             price: 300

    //         },
    //         "10005": {
    //             id: 10005,
    //             title: "商品5",
    //             imgsrc: "img/商品5.png",
    //             price: 300

    //         },
    //         "10006": {
    //             id: 10006,
    //             title: "商品6",
    //             imgsrc: "img/商品6.png",
    //             price: 300

    //         },
    //         "10007": {
    //             id: 10007,
    //             title: "商品7",
    //             imgsrc: "img/商品7.png",
    //             price: 300

    //         },
    //         "10008": {
    //             id: 10008,
    //             title: "商品8",
    //             imgsrc: "img/商品8.png",
    //             price: 300

    //         },
    //         "10009": {
    //             id: 10009,
    //             title: "商品9",
    //             imgsrc: "img/商品9.png",
    //             price: 300

    //         },
    //     }
    //     // 存数据
    // localStorage.setItem("productData", JSON.stringify(productData));
    取数据
    let productData = JSON.parse(localStorage.getItem("productData"));
    // 操作数据 生成列表结构 for in
    let oList = document.getElementById("prodList")
    let str = "";
    for (let id in productData) {
        str += `
            <li>
                <a href="detail.html?id=${id}"> <img src="${productData[id].imgsrc}" alt=""></a>
                <p>${productData[id].title}</p>
                <p>${productData[id].price}</p>
                <input type="button" value="加入购物车" class="addBtn"  data-id="${id}">
            </li>
            `;
    }
    oList.innerHTML = str;
    let cart = new Cart();

    let aAddBtns = document.querySelectorAll(".addBtn");
    for (let i = 0; i < aAddBtns.length; i++) {
        aAddBtns[i].onclick = function() {
            let id = aAddBtns[i].getAttribute("data-id")
            cart.saveData(id, 1, false);
        }
    }
</script>

</html>